<template>
  <div class="app-container" :loading="loading">
    <vxe-form
      :data="formData"
      @submit="onSearchBtnClick"
      @reset="onSearchBtnClick"
    >
      <vxe-form-item
        field="goodsName"
        :item-render="{
          name: 'input',
          attrs: { placeholder: '请输入预警名称搜索' },
        }"
      />
      <vxe-form-item
        field="warningModule"
        :item-render="{
          name: 'select',
          attrs: { placeholder: '请输入预警模块搜索', maxlength: 64 },
        }"
      >
        <template #default="{ data }">
          <vxe-select
            v-model="data.orderStatus"
            placeholder="请输入预警模块搜索"
            clearable
          >
            <vxe-option value="0" label="设备管理"></vxe-option>
            <vxe-option value="1" label="模具维修"></vxe-option>
            <vxe-option value="2" label="生产工单"></vxe-option>
          </vxe-select>
        </template>
      </vxe-form-item>
      <vxe-form-item
        :item-render="{
          name: '$buttons',
          children: [
            {
              props: {
                type: 'submit',
                content: 'common.select',
                status: 'primary',
              },
            },
            { props: { type: 'reset', content: 'common.reset' } },
          ],
        }"
      />
    </vxe-form>
    <vxe-toolbar custom>
      <template v-slot:buttons>
        <vxe-button
          v-auth="['admin', 'role:delete']"
          size="medium"
          icon="el-icon-delete"
          status="danger"
          :disabled="!multipleSelection.length"
          @click="onDeleteBtnClick"
          >删除</vxe-button
        >
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="table"
      border
      size="mini"
      resizable
      highlight-current-row
      :data="tableData"
      align="left"
      show-overflow
      show-header-overflow
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
      :footer-method="footerMethod"
      show-footer
    >
      <vxe-table-column type="checkbox" width="50" />
      <vxe-table-column field="warningName" title="预警名称" width="150px" />
      <vxe-table-column field="warningModule" title="预警模块" width="150px" />
      <vxe-table-column
        field="warningConditions"
        title="预警条件"
        width="150px"
      />
      <vxe-table-column
        field="warningCategory"
        title="预警对象类别"
        width="100px"
      />
      <vxe-table-column field="warningMode" title="预警方式" width="100px" />
      <vxe-table-column field="warningMessage" title="预警消息" width="300px" />
      <vxe-table-column field="creator" title="创建人" width="150px" />
      <vxe-table-column
        field="ctrateTime"
        title="创建时间"
        width="200px"
      />
    </vxe-table>
    <vxe-pager
      :current-page.sync="formData.currentPage"
      :page-size.sync="formData.pageSize"
      :total="total"
      :page-sizes="[10, 20, 100, 200]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      loading: false,
      formData: {
        currentPage: 1,
        pageSize: 10,
      },
      visible: false,
      tableData: [],
      multipleSelection: [],
      detail: null,
      total: 0,
      param: {},
      checked: [],
      detailInfo: null,
      auditData: null,
      auditProgress: null,
      data: {
        total: 2,
        list: [
          {
            id: '1',
            warningName: '设备已维修预警',
            warningModule: '设备管理',
            warningConditions: '已维修',
            warningCategory: '车间',
            warningMode: '系统预警',
            warningMessage: '设备已维修预警,预警对象全部车间',
            creator: '许建梅',
            ctrateTime: '2021-12-08 09:23:15',
          },
          {
            id: '2',
            warningName: '模具待维修预警',
            warningModule: '模具维修',
            warningConditions: '待维修',
            warningCategory: '班组',
            warningMode: '系统预警',
            warningMessage: '模具待维修预警,预警对象全部班组',
            creator: '许建梅',
            ctrateTime: '2021-12-08 09:22:37',
          },
        ],
      },
    }
  },
  watch: {
    isShow: function() {
      this.$emit('input', null)
    },
  },
  created() {
    this.onSearchBtnClick()
  },
  methods: {
    onSearchBtnClick() {
      debugger
      // this.loading = true
      // coalEnters(this.formData).then(data => {

      this.tableData = this.data.list
      this.total = this.data.total
      // this.loading = false
      // })
    },
    selectAllEvent({ records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records
    },

    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    },
    onAddBtnClick() {
      this.detail = {}
      this.detail.bomList = []
    },
    onEditBtnClick(row) {
      this.detail = row
    },
    onDeleteBtnClick() {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => this.deleteData())
    },
    async deleteData() {
      // const selectRecords = this.$refs.table.getCheckboxRecords()
      // await del(selectRecords.map(item => item.id))
      this.$notify({
        type: 'success',
        message: '删除成功!',
      })
      this.onSearchBtnClick()
    },
    colseDialog() {
      this.detail = null
      this.onSearchBtnClick()
    },
    onSalesBtnClick(row) {
      row.contractId = row.id
      this.$router.push({ path: '/sales-form', query: { data: row } })
    },
    auditPage(row) {
      this.auditData = row
    },
    detailInfoPage(row) {
      this.detailInfo = row
    },
    auditProgressPage(row) {
      // 更新表单
      this.keys = +new Date()
      this.isShow = true
      this.auditProgress = row
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 3) {
            return '合计'
          }
          if (columnIndex === 4) {
            return this.moneyFormat(`${this.sumNum(data, 'money')}`)
          }
          if (columnIndex === 5) {
            return this.moneyFormat(`${this.sumNum(data, 'hasReciveMoney')}`)
          }
          return
        }),
      ]
    },
    //合计
    sumNum(list, field) {
      let count = 0
      list.forEach((item) => {
        count += Number(item[field])
      })
      return count
    },
  },
}
</script>
